<template>
    <P class="breadcrumb">
        <span>首页</span>
        <span class="margin-lr-10p">></span>
        <span>个人中心</span>
        <span class="margin-lr-10p">></span>
        <span v-text="title"></span>
    </P>
    <div class="permainBox">
        <div class="lBox">
            <!-- 内容区 -->
            <div class="per_info">
                <h3>Hi，欢迎来到个人中心！</h3>
                <p>IIFA ID: <span v-text="memberInfoData.igAasId"></span></p>
                <p>注册时间:<span v-text="dayjs(memberInfoData.createTime).format('YYYY-MM-DD')"></span></p>
            </div>
            <ul class="perlist">
                <li v-for="(item, index) in listData" :key="index" @click="menuClick(item, index)">
                    <p @mousemove="move(item, index)" @mouseout="leave(item, index)">
                        <img :src="[isHover == index ? require(`../../assets/img/${item.src2}`) : require(`../../assets/img/${item.src}`)]"
                            alt="">
                        <span v-text="item.title"></span>
                        <span class="menu-icon" v-if="item.children.length">
                            <el-icon v-if="isActive == index">
                                <ArrowDown />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowLeft />
                            </el-icon>

                        </span>
                    </p>
                    <ul v-if="item.children.length && isActive == index">
                        <li v-for="(item2, index2) in item.children" :key="index2" @click="menuLevelChange(item2, index2)">
                            {{ item2.title }}
                        </li>
                    </ul>

                </li>
            </ul>
        </div>
        <div class="rBox">
            <!-- 个人信息 -->
            <component :is="currentComponent"></component>
        </div>
    </div>
</template>
<script setup lang="ts">
import BaseInfo from "./BaseInfo.vue"
import InfoCenter from "./InfoCenter.vue"
import SearchScore from "./SearchScore.vue"
import PrinitExamination from "./PrintExamination.vue"
import ExamRegis from "./ExamRegis.vue"
import ExamOrder from "./ExamOrder.vue"
import Order_zs from "./Order_zs.vue"
import Certificate from "./Certificate.vue"
import HasCertificate from "./HasCertificate.vue"
import type { MemberModel } from "@/api/member"
import { cloneDeep } from "lodash";
import { memberInfoApi } from "@/api/member"
import dayjs from "dayjs"
import eventBus from "../../event/mitt"
const title = ref<string>('基本信息')
const currentComponent = ref<any>(BaseInfo)
const router = useRouter()
const memberInfoData = ref<MemberModel>({ id: '', idCard: '', name: '', postal: '', email: '', phone: '', address: '', surname: '', egName: '', birthday: '', province: '', city: '', enAddress: '', workList: [], igAasId: '', educationList: [], createTime: '' })
async function memberInfo() {
    const res = await memberInfoApi()
    if (res.code === -1 || res.code === -2 || res.code === -3 || res.code === -4 || res.code === -5) {
        eventBus.emit('isLogin', false)
        router.push('/')
    } else {
        memberInfoData.value = cloneDeep(res.data) ?? {
            id: '', idCard: '', name: '', email: '', postal: '', phone: '', address: '', surname: '', egName: '', birthday: '', province: '', city: '', enAddress: '', workList: [], igAasId: '', educationList: [], createTime: ''
        }
        eventBus.emit('isLogin', true)
        eventBus.emit('memberEmail', memberInfoData.value.email) 
        eventBus.emit('memberInfo',memberInfoData.value)
    }
}

onMounted(() => {
    memberInfo()
})

let listData = ref([
    {
        title: "基本信息",
        link: "",
        src: "icon_user05.png",
        src2: "icon_user005.png",
        children: []
    },
    {
        title: "消息中心",
        link: "",
        src: "icon_information01.png",
        src2: "icon_information001.png",
        children: []
    },
    {
        title: "考试中心",
        link: "",
        src: "icon_exam02.png",
        src2: "icon_exam002.png",
        children: [
            {
                title: "考试注册",
                link: "",
            },
            {
                title: "打印准考证",
                link: "",
            },
            {
                title: "成绩查询",
                link: "",
            }
        ]
    },
    {
        title: "认证中心",
        link: "",
        src: "icon_member03.png",
        src2: "icon_member003.png",
        children: [
            {
                title: "证书申请",
                link: "",
            },
            {
                title: "已有证书",
                link: "",
            }
        ]
    },
    {
        title: "订单中心",
        link: "",
        src: "icon_order04.png",
        src2: "icon_order004.png",
        children: [
            {
                title: "考试申请订单",
                link: "",
            },
            {
                title: "证书申请订单",
                link: "",
            }
        ]
    }
]);
let isActive = ref(0);
let isHover = ref(0);
const menuClick = (item: any, index: number) => {
    isActive.value = index
    if (index == 0) {
        currentComponent.value = BaseInfo
        memberInfo()
    }
    if (index == 1) {
        currentComponent.value = InfoCenter
    }


    title.value = item.title
}
const menuLevelChange = (item: any, index: number) => {
    title.value = item.title
    if (isActive.value === 2) {
        if (index == 0) {
            currentComponent.value = ExamRegis
        }
        if (index == 1) {
            currentComponent.value = PrinitExamination
        }
        if (index == 2) {
            currentComponent.value = SearchScore
        }
    }
    if (isActive.value === 3) {
        if (index == 0) {
            currentComponent.value = Certificate
        }
        if (index == 1) {

            currentComponent.value = HasCertificate
        }
    }
    if (isActive.value === 4) {
        debugger
        if (index == 0) {
            currentComponent.value = ExamOrder
        }else if (index == 1) {
            currentComponent.value = Order_zs
        }
    }

}

const move = (item, index) => {
}
const leave = (item, index) => {
    isHover.value = index;
}
//动态引用assets下图片
const getAssetUrl = (type) => {
    console.log(`../assets/img/${type}`);
    return new URL(`../assets/img/${type}`, import.meta.url).href
}
</script>
<style scoped lang='less'>
.breadcrumb {
    width: 1300px;
    text-align: left;
    margin: 0 auto;
    padding: 0;
    font-size: 14px;
    line-height: 15px;
    color: #999;
    margin: 20px auto 18px;
}

.perlist {
    background-color: #ffffff;
}

.margin-lr-10p {
    margin: 0 10px;
}

.permainBox {
    max-width: 1300px;
    width: 96%;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    margin-bottom: 80px;
    zoom: 1;
    display: flex;
    justify-content: space-between;
}

.permainBox .lBox {
    width: 23.4%;
}

.rBox {
    width: calc(100% - 25%);
    height: fit-content;
    background-color: #ffffff;
    padding: 38px 25px 40px 25px;
}

.permainBox .lBox div.per_info {
    padding: 35px 0 32px;
    background: url(../../assets/img/bg_personalcenter_l.png) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
}

.permainBox .lBox div.per_info h3 {
    font-size: 20px;
    line-height: 21px;
    color: #fff;
    text-align: center;
}

.permainBox .lBox div.per_info p {
    font-size: 16px;
    line-height: 21px;
    color: #7089c8;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}

.permainBox .lBox div.per_info span {
    font-size: 16px;
    line-height: 21px;

    color: #fff;

    text-align: center;
}

.permainBox .lBox ul li {
    line-height: 57px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    padding-left: 20px;

    >ul li {
        font-size: 14px;
        line-height: 45px;
    }

    >p {
        position: relative;
    }

    p>img {
        margin-right: 8px;

    }

    >p:hover::after {
        opacity: 1 !important;
    }

    >p::after {
        opacity: 0;
        content: "";
        width: 2px;
        height: 50%;
        background-color: #013668;
        display: block;
        position: absolute;
        right: 0;
        top: 25%;
    }
}

.menu-icon {
    float: right;
    margin-right: 10px;
}
</style>
